import React from "react";
import type { Meta, StoryObj } from "@storybook/react-webpack5";
import Input, { InputSize, InputType } from "./input";

/**
 * Input 组件 Storybook 配置
 *
 * 这个文件定义了 Input 组件在 Storybook 中的所有示例和文档。
 * 每个 story 都展示了 Input 组件的不同使用场景和功能特性。
 */

// Storybook 元数据配置
const meta: Meta<typeof Input> = {
  title: "Components/Input", // 组件在 Storybook 侧边栏中的路径
  component: Input, // 关联的组件
  tags: ["autodocs"], // 自动生成文档
  parameters: {
    // 组件文档配置
    docs: {
      description: {
        component: `
# Input 输入框组件

一个高度可定制的输入框组件，支持多种类型、尺寸、状态和前后缀。

## 功能特性

- ✅ 支持多种输入类型（文本、密码、数字、邮箱等）
- ✅ 支持三种尺寸（大、默认、小）
- ✅ 支持前缀和后缀内容
- ✅ 支持禁用、只读状态
- ✅ 支持错误、成功、警告状态
- ✅ 支持标签和错误提示
- ✅ 完整的键盘事件支持
- ✅ 响应式设计
- ✅ 暗色主题支持

## 使用示例

\`\`\`tsx
// 基本使用
<Input placeholder="请输入内容" />

// 带前缀的输入框
<Input prefix="¥" placeholder="请输入金额" />

// 带后缀的输入框
<Input suffix="@example.com" placeholder="用户名" />

// 错误状态
<Input error errorMessage="请输入有效内容" />
\`\`\`
        `,
      },
    },
    // 控件配置
    controls: {
      exclude: ["className", "style"], // 排除不需要在控件面板显示的属性
    },
  },
  // 参数配置
  argTypes: {
    // 尺寸参数配置
    size: {
      control: { type: "select" }, // 使用下拉选择控件
      options: Object.values(InputSize), // 可选项为 InputSize 枚举值
      description: "设置输入框尺寸", // 参数描述
      table: {
        type: { summary: "InputSize" }, // 类型摘要
        defaultValue: { summary: "InputSize.default" }, // 默认值
      },
    },
    // 类型参数配置
    type: {
      control: { type: "select" }, // 使用下拉选择控件
      options: Object.values(InputType), // 可选项为 InputType 枚举值
      description: "设置输入框类型", // 参数描述
      table: {
        type: { summary: "InputType" }, // 类型摘要
        defaultValue: { summary: "InputType.text" }, // 默认值
      },
    },
    // 禁用状态参数配置
    disabled: {
      control: { type: "boolean" }, // 使用布尔值控件
      description: "设置输入框是否禁用", // 参数描述
      table: {
        type: { summary: "boolean" }, // 类型摘要
        defaultValue: { summary: "false" }, // 默认值
      },
    },
    // 错误状态参数配置
    error: {
      control: { type: "boolean" }, // 使用布尔值控件
      description: "设置输入框错误状态", // 参数描述
      table: {
        type: { summary: "boolean" }, // 类型摘要
        defaultValue: { summary: "false" }, // 默认值
      },
    },
    // 成功状态参数配置
    success: {
      control: { type: "boolean" }, // 使用布尔值控件
      description: "设置输入框成功状态", // 参数描述
      table: {
        type: { summary: "boolean" }, // 类型摘要
        defaultValue: { summary: "false" }, // 默认值
      },
    },
    // 警告状态参数配置
    warning: {
      control: { type: "boolean" }, // 使用布尔值控件
      description: "设置输入框警告状态", // 参数描述
      table: {
        type: { summary: "boolean" }, // 类型摘要
        defaultValue: { summary: "false" }, // 默认值
      },
    },
  },
};

export default meta;

// 定义 Story 类型
type Story = StoryObj<typeof Input>;

/**
 * 默认输入框示例
 *
 * 展示 Input 组件的基本用法，包含最常用的属性配置。
 * 这个示例演示了如何创建一个标准的文本输入框。
 */
export const Default: Story = {
  name: "基础输入框",
  args: {
    placeholder: "请输入内容", // 占位符文本
    type: InputType.text, // 输入框类型
    size: InputSize.default, // 输入框尺寸
  },
  parameters: {
    docs: {
      description: {
        story: "基本的文本输入框，包含默认的样式和交互行为。",
      },
    },
  },
};

/**
 * 不同尺寸的输入框示例
 *
 * 展示 Input 组件的三种尺寸变体：大、默认、小。
 * 这个示例演示了如何通过 size 属性控制输入框的尺寸。
 */
export const Sizes: Story = {
  name: "不同尺寸",
  render: (args) => (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      {/* 大尺寸输入框 */}
      <Input {...args} size={InputSize.lg} placeholder="大尺寸输入框" />

      {/* 默认尺寸输入框 */}
      <Input {...args} size={InputSize.default} placeholder="默认尺寸输入框" />

      {/* 小尺寸输入框 */}
      <Input {...args} size={InputSize.sm} placeholder="小尺寸输入框" />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "展示输入框的三种尺寸变体：大尺寸（lg）、默认尺寸（default）、小尺寸（sm）。",
      },
    },
  },
};

/**
 * 不同状态的输入框示例
 *
 * 展示 Input 组件的各种状态：禁用、只读、错误、成功、警告。
 * 这个示例演示了如何通过不同的状态属性控制输入框的外观和行为。
 */
export const States: Story = {
  name: "不同状态", // 中文翻译名称
  render: (args) => (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      {/* 禁用状态输入框 */}
      <Input {...args} disabled placeholder="禁用状态输入框" />

      {/* 只读状态输入框 */}
      <Input {...args} readOnly value="只读状态输入框" />

      {/* 错误状态输入框 */}
      <Input
        {...args}
        error
        errorMessage="请输入有效内容"
        placeholder="错误状态输入框"
      />

      {/* 成功状态输入框 */}
      <Input {...args} success placeholder="成功状态输入框" />

      {/* 警告状态输入框 */}
      <Input {...args} warning placeholder="警告状态输入框" />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "展示输入框的各种状态：禁用状态、只读状态、错误状态、成功状态、警告状态。",
      },
    },
  },
};

/**
 * 带前后缀的输入框示例
 *
 * 展示 Input 组件的前缀和后缀功能。
 * 这个示例演示了如何为输入框添加前缀图标或文本和后缀内容。
 */
export const WithAffix: Story = {
  name: "前后缀", // 中文翻译名称
  render: (args) => (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      {/* 带前缀的输入框 */}
      <Input {...args} prefix="¥" placeholder="请输入金额" />

      {/* 带后缀的输入框 */}
      <Input {...args} suffix="@example.com" placeholder="用户名" />

      {/* 同时带前后缀的输入框 */}
      <Input {...args} prefix="http://" suffix=".com" placeholder="网站地址" />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "展示带前缀和后缀的输入框，可以用于货币输入、邮箱输入、网址输入等场景。",
      },
    },
  },
};

/**
 * 带标签的输入框示例
 *
 * 展示 Input 组件的标签功能。
 * 这个示例演示了如何为输入框添加标签和错误提示信息。
 */
export const WithLabel: Story = {
  name: "带标签", // 中文翻译名称
  render: (args) => (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      {/* 带标签的输入框 */}
      <Input {...args} label="用户名" placeholder="请输入用户名" />

      {/* 带标签和错误提示的输入框 */}
      <Input
        {...args}
        label="邮箱地址"
        error
        errorMessage="请输入有效的邮箱地址"
        placeholder="请输入邮箱地址"
      />

      {/* 必填字段 */}
      <Input
        {...args}
        label={
          <span>
            密码 <span style={{ color: "red" }}>*</span>
          </span>
        }
        type={InputType.password}
        placeholder="请输入密码"
      />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "展示带标签的输入框，可以更好地组织表单字段和提供错误提示。",
      },
    },
  },
};

/**
 * 不同输入类型的示例
 *
 * 展示 Input 组件支持的各种输入类型。
 * 这个示例演示了不同类型的输入框在行为和验证上的差异。
 */
export const Types: Story = {
  name: "输入类型", // 中文翻译名称
  render: (args) => (
    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
      {/* 文本输入框 */}
      <Input
        {...args}
        type={InputType.text}
        label="文本输入框"
        placeholder="请输入文本"
      />

      {/* 密码输入框 */}
      <Input
        {...args}
        type={InputType.password}
        label="密码输入框"
        placeholder="请输入密码"
      />

      {/* 数字输入框 */}
      <Input
        {...args}
        type={InputType.number}
        label="数字输入框"
        placeholder="请输入数字"
      />

      {/* 邮箱输入框 */}
      <Input
        {...args}
        type={InputType.email}
        label="邮箱输入框"
        placeholder="请输入邮箱地址"
      />

      {/* 电话输入框 */}
      <Input
        {...args}
        type={InputType.tel}
        label="电话输入框"
        placeholder="请输入电话号码"
      />

      {/* 搜索输入框 */}
      <Input
        {...args}
        type={InputType.search}
        label="搜索输入框"
        placeholder="请输入搜索关键词"
      />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "展示不同类型的输入框，每种类型都有特定的验证规则和输入行为。",
      },
    },
  },
};

/**
 * 交互式示例
 *
 * 展示 Input 组件的交互功能。
 * 这个示例演示了输入框的各种事件处理和动态行为。
 */
export const Interactive: Story = {
  name: "交互示例", // 中文翻译名称
  render: function Render(args) {
    const [value, setValue] = React.useState("");
    const [characterCount, setCharacterCount] = React.useState(0);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setValue(e.target.value);
      setCharacterCount(e.target.value.length);
    };

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
        {/* 实时显示输入内容的输入框 */}
        <Input
          {...args}
          value={value}
          onChange={handleChange}
          placeholder="请输入内容（实时显示）"
        />

        {/* 字符计数显示 */}
        <div style={{ fontSize: "14px", color: "#666" }}>
          已输入 {characterCount} 个字符
        </div>

        {/* 带最大长度限制的输入框 */}
        <Input {...args} maxLength={10} placeholder="最多输入10个字符" />
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: "展示输入框的交互功能，包括实时内容显示、字符计数和长度限制等。",
      },
    },
  },
};

/**
 * 所有变体展示
 *
 * 在一个页面中展示 Input 组件的所有功能和变体。
 * 这个示例提供了组件的完整功能概览。
 */
export const AllVariants: Story = {
  name: "所有变体", // 中文翻译名称
  render: (args) => (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
        gap: "24px",
      }}
    >
      {/* 尺寸变体 */}
      <div>
        <h3>尺寸变体</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <Input size={InputSize.lg} placeholder="大尺寸输入框" />
          <Input size={InputSize.default} placeholder="默认尺寸输入框" />
          <Input size={InputSize.sm} placeholder="小尺寸输入框" />
        </div>
      </div>

      {/* 状态变体 */}
      <div>
        <h3>状态变体</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <Input disabled placeholder="禁用状态" />
          <Input readOnly value="只读状态" />
          <Input error errorMessage="错误提示" placeholder="错误状态" />
          <Input success placeholder="成功状态" />
          <Input warning placeholder="警告状态" />
        </div>
      </div>

      {/* 前后缀变体 */}
      <div>
        <h3>前后缀变体</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <Input prefix="¥" placeholder="带前缀" />
          <Input suffix=".com" placeholder="带后缀" />
          <Input prefix="http://" suffix=".com" placeholder="带前后缀" />
        </div>
      </div>

      {/* 类型变体 */}
      <div>
        <h3>类型变体</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
          <Input type={InputType.password} placeholder="密码类型" />
          <Input type={InputType.number} placeholder="数字类型" />
          <Input type={InputType.email} placeholder="邮箱类型" />
          <Input type={InputType.search} placeholder="搜索类型" />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "在一个页面中展示 Input 组件的所有功能和变体，方便快速浏览和比较。",
      },
    },
  },
};